<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style>
			*,
			body {
				margin: 0;
				padding: 0;
			}

			.wrap {
				width: 100%;
				height: 400px;
				border: 1px solid #ccc;
				-webkit-transform: translate3d(0, 0, 0);
				-moz-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}

			.drag-wrap {
				position: absolute;
				width: 100px;
				height: 100px;
				box-sizing: border-box;
				border: 1px solid transparent;
			}

			.drag-img {

				display: block;
				width: 100%;
				height: 100%;
			}

			.is-active {

				border: 1px dashed red;
			}

			.handle {
				display: none;
				position: absolute;
				right: -15px;
				bottom: -15px;
				width: 30px;
				height: 30px;
				background: red;
				z-index: 9;
			}

			.is-active .handle {
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="wrap" ref="wrap">
				<div class="drag-wrap" :style="[
						{top:item.top+'px'},
						{left:item.left+'px'},
						{transform:'scale('+item.scale+') rotate('+item.angle+'deg)'}
					]"
				 :class="{'is-active':item.active}" v-for="(item,index) in itemList" :key="index" :data-id="item.id"
				 @touchstart.stop.prevent="wrapStart" @touchmove.stop.prevent="wrapMove" @touchend.stop.prevent="wrapEnd">
					<img :data-id="item.id" class="drag-img" :src="item.image">
					<div class="handle" :data-id="item.id" @touchstart.stop.prevent="start" @touchmove.stop.prevent="move" :style="{transform:'scale('+item.oScale+')'}">
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script>
			Vue.config.devtools = true
			var items = []
			
			var vm = new Vue({
				el: '#app',
				data: function() {
					return {
						wrapWidth: 0,
						itemList: [{
							id: 1,
							image: 'yuque.png', //图片地址
							top: 100, //初始图片的位置 
							left: 100,
							x: 150, //初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
							y: 150,
							scale: 1, //缩放比例 1为不缩放
							angle: 0, //旋转角度
							rotate: 0,
							active: false //判定点击状态
						}, {
							id: 2,
							image: 'yuque.png',
							top: 300,
							left: 300,
							x: 350,
							y: 350,
							scale: 1,
							angle: 0,
							rotate: 0,
							active: false
						}, {
							id: 3,
							image: 'yuque.png',
							top: 200,
							left: 200,
							x: 250,
							y: 250,
							scale: 1,
							angle: 0,
							rotate: 0,
							active: false
						}]
					}
				},
				
				mounted: function() {
					items = this.itemList;
					this.wrapWidth = document.querySelector('.wrap').offsetWidth;
				},
				methods: {
					wrapStart: function(e) {

						for (let i = 0; i < items.length; i++) { //旋转数据找到点击的
							items[i].active = false;
							if (e.currentTarget.dataset.id == items[i].id) {
								index = i; //记录下标
								items[index].active = true; //开启点击属性
							}
						}

						items[index].lx = e.touches[0].clientX; // 记录点击时的坐标值
						items[index].ly = e.touches[0].clientY;

						this.itemList = items

					},
					wrapMove: function(e) {
						//移动时的坐标值也写图片的属性里
						items[index]._lx = e.touches[0].clientX;
						items[index]._ly = e.touches[0].clientY;

						//追加改动值
						items[index].left += items[index]._lx - items[index].lx; // x方向
						items[index].top += items[index]._ly - items[index].ly; // y方向
						items[index].x += items[index]._lx - items[index].lx;
						items[index].y += items[index]._ly - items[index].ly;

						//把新的值赋给老的值
						items[index].lx = e.touches[0].clientX;
						items[index].ly = e.touches[0].clientY;
						this.itemList = items

					},
					wrapEnd: function() {
						alert(111)
					},
					start: function(e) {
						//找到点击的那个图片对象，并记录
						for (let i = 0; i < items.length; i++) {
							items[i].active = false;

							if (e.currentTarget.dataset.id == items[i].id) {
								index = i;
								items[index].active = true;
							}
						}
						//获取作为移动前角度的坐标
						items[index].tx = e.touches[0].clientX;
						items[index].ty = e.touches[0].clientY;
						//移动前的角度
						items[index].anglePre = this.countDeg(items[index].x, items[index].y, items[index].tx, items[index].ty)
						//获取图片半径
						items[index].r = this.getDistancs(items[index].x, items[index].y, items[index].left, items[index].top)

					},
					move: function(e) {
						//记录移动后的位置
						items[index]._tx = e.touches[0].clientX;
						items[index]._ty = e.touches[0].clientY;
						//移动的点到圆心的距离 * 因为圆心的坐标是相对与父元素定位的 ，所有要减去父元素的OffsetLeft和OffsetTop来计算移动的点到圆心的距离
						items[index].disPtoO = this.getDistancs(items[index].x, items[index].y, items[index]._tx - this.wrapWidth * 0,
							items[index]._ty - 10)

						items[index].scale = items[index].disPtoO / items[index].r; //手指滑动的点到圆心的距离与半径的比值作为图片的放大比例
						items[index].oScale = 1 / items[index].scale; //图片放大响应的右下角按钮同比缩小

						//移动后位置的角度
						items[index].angleNext = this.countDeg(items[index].x, items[index].y, items[index]._tx, items[index]._ty)
						//角度差
						items[index].new_rotate = items[index].angleNext - items[index].anglePre;

						//叠加的角度差
						items[index].rotate += items[index].new_rotate;
						items[index].angle = items[index].rotate; //赋值


						//用过移动后的坐标赋值为移动前坐标
						items[index].tx = e.touches[0].clientX;
						items[index].ty = e.touches[0].clientY;
						items[index].anglePre = this.countDeg(items[index].x, items[index].y, items[index].tx, items[index].ty)

						this.itemList = items

					},
					/*
					 *参数1和2为图片圆心坐标
					 *参数3和4为手点击的坐标
					 *返回值为手点击的坐标到圆心的角度
					 */
					countDeg: function(cx, cy, pointer_x, pointer_y) {
						var ox = pointer_x - cx;
						var oy = pointer_y - cy;
						var to = Math.abs(ox / oy);
						var angle = Math.atan(to) / (2 * Math.PI) * 360; //鼠标相对于旋转中心的角度
						console.log("ox.oy:", ox, oy)
						if (ox < 0 && oy < 0) //相对在左上角，第四象限，js中坐标系是从左上角开始的，这里的象限是正常坐标系 
						{
							angle = -angle;
						} else if (ox <= 0 && oy >= 0) //左下角,3象限 
						{
							angle = -(180 - angle)
						} else if (ox > 0 && oy < 0) //右上角，1象限 
						{
							angle = angle;
						} else if (ox > 0 && oy > 0) //右下角，2象限 
						{
							angle = 180 - angle;
						}

						return angle;
					},
					getDistancs: function(cx, cy, pointer_x, pointer_y) {
						var ox = pointer_x - cx;
						var oy = pointer_y - cy;
						return Math.sqrt(
							ox * ox + oy * oy
						);
					}
				}
			})
		</script>
	</body>
</html>
